{% extends 'base/base.html' %}
{% load static %}

{% block title %}搜索结果: {{ query }} - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .search-header {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 25px;
        margin-bottom: 30px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .search-query {
        font-weight: 600;
        color: #6a11cb;
    }
    
    .search-form {
        max-width: 600px;
    }
    
    .search-input {
        border-radius: 25px;
        padding: 12px 20px;
        border: 1px solid #ced4da;
    }
    
    .search-btn {
        border-radius: 25px;
        padding: 10px 25px;
    }
    
    .result-count {
        font-size: 1.1rem;
        font-weight: 500;
        margin-bottom: 20px;
    }
    
    .box-image-container {
        overflow: hidden;
        position: relative;
    }
    
    .box-image {
        transition: transform 0.5s;
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .box-card:hover .box-image {
        transform: scale(1.05);
    }
    
    .box-card {
        border-radius: 15px;
        overflow: hidden;
        transition: transform 0.3s, box-shadow 0.3s;
        background-color: white;
    }
    
    .box-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(163, 112, 247, 0.2);
    }
    
    .badge-discount {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 8px 10px;
        font-weight: 700;
        font-size: 0.8rem;
        z-index: 2;
        background: linear-gradient(135deg, #a370f7, #ff6b8b);
    }
    
    .empty-result {
        text-align: center;
        padding: 50px 0;
    }
    
    .empty-result-icon {
        font-size: 3rem;
        color: #6c757d;
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-5">
    <!-- 搜索头部 -->
    <div class="search-header">
        <h1 class="mb-3">搜索结果: <span class="search-query">{{ query }}</span></h1>
        <p class="mb-4">为您找到 <strong>{{ count }}</strong> 个相关盲盒</p>
        
        <!-- 搜索表单 -->
        <form action="{% url 'blindbox:search' %}" method="get" class="search-form">
            <div class="input-group">
                <input type="text" class="form-control search-input" name="q" value="{{ query }}" placeholder="搜索更多盲盒...">
                <button class="btn btn-primary search-btn" type="submit">
                    <i class="fas fa-search me-2"></i>搜索
                </button>
            </div>
        </form>
    </div>
    
    <!-- 搜索结果列表 -->
    <div class="row">
        {% for box in results %}
        <div class="col-md-3 mb-4">
            <div class="card h-100 border-0 shadow-sm box-card">
                <div class="box-image-container">
                    <img src="{{ box.image_url }}" alt="{{ box.name }}" class="box-image">
                    {% if box.discount_price and box.original_price and box.discount_price < box.original_price %}
                    <span class="badge bg-danger badge-discount">
                        立省{{ box.discount_percentage }}%
                    </span>
                    {% endif %}
                </div>
                <div class="card-body">
                    <h5 class="card-title">{{ box.name }}</h5>
                    <p class="card-text text-muted small mb-2">
                        {{ box.category|default:"未分类" }} | 已售 {{ box.sales }}
                    </p>
                    <div class="d-flex justify-content-between align-items-center mt-2">
                        <div>
                            {% if box.discount_price %}
                            <span class="text-danger fw-bold">¥{{ box.discount_price }}</span>
                            <small class="text-muted text-decoration-line-through ms-2">¥{{ box.original_price }}</small>
                            {% else %}
                            <span class="text-danger fw-bold">¥{{ box.original_price }}</span>
                            {% endif %}
                        </div>
                        <a href="{% url 'blindbox:detail' box_id=box.box_id %}" class="btn btn-sm btn-primary">
                            <i class="fas fa-eye me-1"></i>查看
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 empty-result">
            <div class="empty-result-icon">
                <i class="fas fa-search"></i>
            </div>
            <h3>未找到"{{ query }}"相关的盲盒</h3>
            <p class="text-muted">尝试更换关键词或浏览我们的所有盲盒</p>
            <div class="mt-4">
                <a href="{% url 'blindbox:list' %}" class="btn btn-primary me-2">
                    <i class="fas fa-box-open me-2"></i>浏览所有盲盒
                </a>
                <a href="{% url 'blindbox:index' %}" class="btn btn-outline-primary">
                    <i class="fas fa-home me-2"></i>返回首页
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- 相关推荐 -->
    {% if results %}
    <div class="mt-5 mb-4">
        <h3>您可能还喜欢</h3>
        <hr>
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="row g-0">
                        <div class="col-md-4">
                            <img src="{% static 'images/category-food.jpg' %}" class="img-fluid rounded-start h-100" alt="食品饮料" style="object-fit: cover;">
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <h5 class="card-title">食品饮料盲盒</h5>
                                <p class="card-text">精选各类零食、饮品、小吃等临期食品，品质保障超值体验。</p>
                                <a href="{% url 'blindbox:list' %}?category=食品饮料" class="btn btn-sm btn-outline-primary">查看全部</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="row g-0">
                        <div class="col-md-4">
                            <img src="{% static 'images/category-daily.jpg' %}" class="img-fluid rounded-start h-100" alt="日用百货" style="object-fit: cover;">
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <h5 class="card-title">日用百货盲盒</h5>
                                <p class="card-text">家居用品、洗护用品、小家电等日常必需品，实用又惊喜。</p>
                                <a href="{% url 'blindbox:list' %}?category=日用百货" class="btn btn-sm btn-outline-primary">查看全部</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %} 